<!--  -->
<template>
  <div>
      <LoginTop middleTop='注册bilibili'>
          <div slot="right" style="font-size:3.611vw" @click="$router.push('/login')">切换到登录页面</div>
      </LoginTop>
      <LoginText label="姓名" 
        style="margin:4.167vw 0"
        rule="^.{6,16}$"
        placeholder="请输入姓名"
        @inputChange="res=>model.name=res"
        ></LoginText>
      <LoginText 
        label="账号"
        placeholder="请输入账号"
        rule="^.{6,16}$"
         @inputChange="res=>model.username=res"
      ></LoginText>
      <LoginText 
        label="密码"
        placeholder="请输入密码"
        type="password"
         @inputChange="res=>model.password=res"
         rule="^.{6,16}$"
      ></LoginText>
      <LoginBtn btntext="注册" @registerSubmit="registerSubmit"></LoginBtn>
  </div>
</template>

<script>
import LoginTop from '@/components/Login/LoginTop.vue'
import LoginText from '@/components/Login/LoginText.vue'
import LoginBtn from '@/components/Login/LoginBtn.vue'
export default {
    name:'Register',
  data () {
    return {
       model:{
        name:'',
        username:'',
        password:''
       }
    };
  },

  components: {
      LoginTop,
      LoginText,
      LoginBtn
  },
  methods:{
     async registerSubmit(){
         let rulg=/^.{6,16}$/
        if(rulg.test(this.model.name)&&rulg.test(this.model.username)&&rulg.test(this.model.password)){
         const res= await this.$http.post('/register',this.model)
        this.$msg.fail(res.data.msg)
        localStorage.setItem('id',res.data.id)
        localStorage.setItem('token',res.data.objtoken)
        setTimeout(()=>{
            this.$router.push('/userinfo')
        },1000)
        }else{
            this.$msg.fail('格式不正确,请重新输入')
        }
      }
  }


}

</script>
<style  scoped>
</style>